import React, { useEffect, useState } from 'react'
import { Image } from '@tarojs/components'
import { Cell } from '@nutui/nutui-react-taro'
import './BasicInformation.scss'
import { livestockInfo } from '../../api/livestock'

export default function BasicInformation(props) {
  const { listInfo,fn} = props
  // 牛的基本信息
  const [cattleInfo, setCattleInfo] = useState({ name: '', iMei: '' })
  // 牲畜信息
  const [livesInfo, setLivesInfo] = useState([])
  // 耳标信息
  const [earInfo, setEarInfo] = useState({
    // Status:'',
    // F_Quantity:'',
    // F_IMEI:''
  })

  // 表格数据处理
  const disposeNum = (item, num) => {
    if (item == 'state') {
      // 1 养殖中 2已销售 3已死亡
      if (num == 1) return '养殖中'
      if (num == 2) return '已销售'
      if (num == 3) return '已死亡'
    }
    if (num == 0) return '未知'
    if (num == 1) return '是'
    if (num == 2) return '否'
  }

  // 基本信息请求
  const info = async () => {
    const data = { orgid: '', livestockid: listInfo }
    const res = await livestockInfo(data)
    // 耳标
    const earData = res.data.EartagInfo
    // 牛信息
    const linData = res.data.Linveinfo
    setCattleInfo({
      name: linData.F_Title,
      iMei: linData.F_IMEI
    })
    setEarInfo({
      Status:earData.Status,
      F_Quantity:earData.F_Quantity,
      F_IMEI:earData.F_IMEI
    })
    // 传耳标信息给父组件
    fn(earData)
    console.log(earData);
    setLivesInfo([
      { title: '牲畜种类', content: linData.F_Type_Name },
      { title: '性别', content: linData.F_Sex == 0 ? '母' : '公' },
      { title: '年龄', content: linData.F_Age },
      { title: '体重', content: linData.F_Weight + 'KG' },
      { title: '当前状态', content: disposeNum('state', linData.F_State) },
      { title: '是否绝育', content: disposeNum('', linData.F_Jy) },
    ])
  }

  // 牲畜信息列表
  const cells = livesInfo.map(item => {
    return <Cell
      title={
        <div style={{ display: 'flex', alignItems: 'flex-end' }}>
          <span style={{ fontWeight: '400', fontSize: '24rpx' }}>{item.title}</span>
        </div>
      }
      extra={
        <div style={{ display: 'flex', alignItems: 'center', fontSize: '24rpx' }}>
          {item.content}
        </div>
      }
      className='cell'
      radius={0}
    />
  })
  // 电池剩余
  // const width = earInfo.F_Quantity

  useEffect(() => {
    if (listInfo) info()
  }, [listInfo])

  return (
    <>
      <Image
        className='cattle-img'></Image>
      <Cell
        title={
          <div style={{ display: 'flex', alignItems: 'flex-end' }}>
            <span style={{ fontWeight: 'bold', fontSize: '33rpx' }}>{cattleInfo.name}</span>
          </div>
        }
        extra={
          <div style={{ display: 'flex', alignItems: 'center', fontSize: '24rpx' }}>
            {cattleInfo.iMei}
          </div>
        }
        className='cell'
      />
      {/* 设备信息 */}
      <Cell
        title={
          <div style={{ display: 'flex', alignItems: 'flex-end' }}>
            <span style={{ fontWeight: '400' }}>设备信息</span>
          </div>
        }
        className='err-cell cell'
        radius={0}
      />
      <Cell
        title={
          <div style={{ display: 'flex', alignItems: 'flex-end' }}>
            <span style={{ fontWeight: '400', fontSize: '24rpx', display: 'flex' }}>
              智能耳标-
              <a className='status'>{earInfo.Status}</a>
            </span>
          </div>
        }
        extra={
          <div style={{ display: 'flex', alignItems: 'center', fontSize: '24rpx' }}>
            <div className='battery'>
              <div className='white'></div>
              <div className="gre" style={{width:`${earInfo.F_Quantity}%`}}></div>
            </div>
            {earInfo.F_Quantity}% IMEI {earInfo.F_IMEI}
          </div>
        }
        className='cell'
        radius={0}
      />
      {/* 牲畜信息 */}
      <Cell
        title={
          <div style={{ display: 'flex', alignItems: 'flex-end' }}>
            <span style={{ fontWeight: '400' }}>牲畜信息</span>
          </div>
        }
        className='err-cell cell'
        radius={0}
      />
      <Cell.Group>
        {cells}
      </Cell.Group>


    </>
  )
}
